<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <link rel="shortcut icon" href="favicon.ico"/>
                <title>.::AsPerA::. Asignación de Permisos de Aprendices</title>                
            </f:facet>
        </h:head>       

        <h:body>
            <div>
                <h:graphicImage url="/aspera/images/aspera.jpg" width="100%" height="100%" alt="LogoAspera"  style="vertical-align: top;"/> 
            </div>

            <p:panel>
                <p:panelGrid> 
                    <p:row>
                        <p:column style="vertical-align: top;">
                            <h:form>
                                <p:menu>
                                    <p:submenu label="Menú">
                                        <p:menuitem value="Inicio" url="/faces/aspera/GestionGuarda.xhtml" />  
                                        <p:menuitem value="Cambio Contraseña" url="/faces/aspera/CambiaPasswordGuarda.xhtml" />
                                        <p:menuitem value="Cerrar Sesión" actionListener="#{usuariosVista.cerrarSesion_action}" />
                                    </p:submenu>                    
                                </p:menu>                        
                            </h:form>
                        </p:column>
                        <p:column>         

                            <h:form id="formulario"> 
                                <p:panel id="panel" header="Permisos">
                                    <f:facet name="actions">
                                        <p:commandLink onclick="PF('helpDialog').show();" styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"><h:outputText styleClass="ui-icon ui-icon-help" /></p:commandLink>
                                    </f:facet>
                                    <p:messages id="mensajes" showDetail="true" />  
                                    <h:outputText value="Si Desea Buscar un Permiso, Digite el Dato en el Filtro Respectivo" />
                                    <br /><br />

                                    <p:dataTable id="listaPermisos" var="permisos" value="#{guardaVista.listaPermisos}" 
                                                 selectionMode="single" selection="#{guardaVista.selectedPermiso}" filteredValue="#{guardaVista.listaPermisos}"
                                                 rowKey="#{permisos.codigo}" paginator="true" rows="10" 
                                                 emptyMessage="No existen Permisos!" >

                                        <f:facet name="header">  
                                            Permisos Fecha: #{guardaVista.fechaSistema}
                                        </f:facet> 

                                        <p:column sortBy="#{permisos.documentoAprendiz.documento.documento}" filterBy="#{permisos.documentoAprendiz.documento.documento}">
                                            <f:facet name="header">
                                                <h:outputText  value="Documento" />                            
                                            </f:facet>
                                            <h:outputText  value="#{permisos.documentoAprendiz.documento.documento}" />                          
                                        </p:column>

                                        <p:column sortBy="#{permisos.documentoAprendiz.documento.nombre}" filterBy="#{permisos.documentoAprendiz.documento.nombre}">
                                            <f:facet name="header">
                                                <h:outputText  value="Nombre Completo" />                            
                                            </f:facet>
                                            <h:outputText  value="#{permisos.documentoAprendiz.documento.nombre} #{permisos.documentoAprendiz.documento.apellido}" />                          
                                        </p:column>
                                        <p:column>
                                            <f:facet name="header">
                                                <h:outputText  value="Hora Inicio" />                            
                                            </f:facet>
                                            <h:outputText  value="#{permisos.horaDesde}" />                          
                                        </p:column>

                                        <p:column>
                                            <f:facet name="header" >
                                                <h:outputText  value="Hora Fin" />                            
                                            </f:facet>
                                            <h:outputText  value="#{permisos.horaHasta}" />                          
                                        </p:column>  

                                        <p:column filterBy="#{permisos.estado}" filterMatchMode="contains">
                                            <f:facet name="header" >
                                                <h:outputText  value="Estado" />                            
                                            </f:facet>
                                            <h:outputText  value="#{permisos.estado}" />                          
                                        </p:column> 
                                        <p:column filterBy="#{permisos.documentoCoordinador.documento.nombre}" filterMatchMode="contains">
                                            <f:facet name="header" >
                                                <h:outputText  value="Coordinador que autoriza" />                            
                                            </f:facet>
                                            <h:outputText  value="#{permisos.documentoCoordinador.documento.nombre} #{permisos.documentoCoordinador.documento.apellido}" />                          
                                        </p:column> 
                                    </p:dataTable>   

                                </p:panel>
                                <!-- dialogo de ayuda -->
                                <p:dialog id="modalDialog" header="Ayuda" widgetVar="helpDialog" showEffect="fade" hideEffect="bounce" modal="true" dynamic="true">  
                                    <p align="justify">                       
                                        En esta página usted podrá:<br/><br/>
                                        <b>-Consultar Permisos del Dia:</b> ésta opción solo es válida para el usuario de tipo Guarda. En ésta página se muestran 
                                        todos los permisos que se hayan registrando en el dia, pendientes y aprobados, con el fin de otorgar o no la salida del 
                                        centro de formación al aprendiz.
                                        <br/><br/>     
                                        Usted puede filtrar la búsqueda de permisos digitando el documento del aprendiz en el filtro de la columna Documento de la tabla
                                        de resultados. De igual forma, se puede filtrar por Nombre del aprendiz, Estado del permiso y Nombre del Coordinador que autorizó
                                        el permiso.
                                        <br/><br/> 
                                        <u>Nota:</u> Un permiso pendiente es aquel que ha sido registrado por un aprendiz y se encuentra pendiente de aprobación. Un 
                                        permiso aprobado es el que cuenta con la aprobación del instructor a cargo y del coordinador.                                 
                                    </p>
                                </p:dialog>
                            </h:form> 
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:panel> 
            <div>
                <h:graphicImage url="/aspera/images/asperaPie.jpg" width="100%" height="100%" alt="LogoAspera"  style="vertical-align: bottom;"/>
            </div>
        </h:body>

    </f:view>
</html>

